<template>
  <el-dialog
    top="30px"
    width="80%"
    class="dialog-sm"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="委托担保合同" name="contract">
        <register-contract-view
          :related-data="relatedData"
          edit-mode
          @edit="contractEditVisible = true"
        ></register-contract-view>
      </el-tab-pane>
      <el-tab-pane label="反担保合同" name="guard">
        <register-contract-view-guard
          :related-data="relatedData"
          edit-mode
          :loading="loading"
          @edit="guardEditVisible = true"
        ></register-contract-view-guard>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      width="80%"
      append-to-body
      :visible.sync="contractEditVisible"
      :close-on-click-modal="false"
    >
      <register-contract-edit
        :related-data="relatedData"
        @success="handleEditContractSuccess"
        :loading="loading"
      ></register-contract-edit>
    </el-dialog>

    <el-dialog
      width="80%"
      append-to-body
      :visible.sync="guardEditVisible"
      :close-on-click-modal="false"
    >
      <register-contract-edit-guard
        :related-data="relatedData"
        @dismiss="guardEditVisible = false"
        @success="handleEditGuardSuccess"
        :loading="loading"
      ></register-contract-edit-guard>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import RegisterContractEdit from '@/credit/views/county/mission/RegisterContractEdit'
import RegisterContractEditGuard from '@/credit/views/county/mission/RegisterContractEditGuard'

import RegisterContractView from '@/credit/views/county/mission/RegisterContractView'
import RegisterContractViewGuard from '@/credit/views/county/mission/RegisterContractViewGuard'

export default {
  components: {
    RegisterContractEdit,
    RegisterContractEditGuard,
    RegisterContractView,
    RegisterContractViewGuard,
  },
  props: {
    visible: Boolean,
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      activeName: 'contract',
      timer: null,
      successVisible: false,

      contractEditVisible: false,
      guardEditVisible: false,
    }
  },
  computed: {
    ...mapGetters(['entrustContract']),
    relatedId() {
      return this.relatedData.customer_related_id || ''
    },
    hasContract() {
      return +this.relatedData.ensure_status > 0
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.getData()
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  },
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
      this.timer = setTimeout(() => {
        this.activeName = 'contract'
      }, 200)
    },

    async handleEditContractSuccess() {
      this.contractEditVisible = false
      this.$emit('success', true)
      await this.getData()
    },

    async handleEditGuardSuccess() {
      this.$emit('success', true)
      this.$store.dispatch('getGuardsData', this.relatedId)
    },

    async getData() {
      this.loading = true
      await this.$utils.promise(
        Promise.all([
          this.$store.dispatch('getEntrustContract', this.relatedId),
          this.$store.dispatch('getGuardsData', this.relatedId),
        ])
      )
      this.loading = false
    },
  },
}
</script>
<style lang="scss" scoped></style>
